<div class="header">
	<div class="top">
		<div class="content">
			<div class="collection">
				<a href="">
					<img src="image/star.png">收藏非凡商城
				</a>
			</div>
			<div class="welcome">
				<span>欢迎来到非凡商城</span>
				<a href="#">[登录]</a>
				<a href="#">[注册]</a>
			</div>
		</div>
	</div>
	<div class="search">
		<div class="content">
			<div class="logo"><img src="image/logo.png" /></div>
			<div class="search-form">
				<input type="search" name="search" id="search" />
				<input type="button" name="search-btn" value="搜索" />
			</div>
			<div class="shopping-cart">
				<a href="#">购物车（0）</a>
			</div>
		</div>
	</div>
	<div class="menu">
		<div class="content">
			<div class="all-goods">
				<span class="title">全部商品分类<img src="image/row.png"></span>
				<ul class="sub-nav">
					<li>
						<p class="first">
							<a href="#">手机</a>
							<a href="#">数码</a>
							<a href="#">合约机</a>
							<img src="image/row-right.png">
						</p>
						<p class="second">
							<a href="">荣耀</a>
							<a href="">单反</a>
							<a href="">只能设备</a>
						</p>

						<div class="sub-menu">
							<div class="item">
								<div class="cat-name">
									电脑整机
								</div>
								<div class="cat-list">
									<a href="#">笔记本</a>
									<a href="#">超极本 </a>
									<a href="#">上网本 </a>
									<a href="#">平板电脑 </a>
									<a href="#">台式机</a>
								</div>
							</div>
							<div class="item">
								<div class="cat-name">装机配件 </div>
								<div class="cat-list">
									<a href="#">CPU</a>
									<a href="#">硬盘</a>
									<a href="#">SSD固态硬盘 </a>
									<a href="#">内存</a>
									<a href="#">显示</a>
									<a href="#">器智能显示器 </a>
									<a href="#">主板 </a>
									<a href="#">显卡 </a>
									<a href="#">机箱 </a>
									<a href="#">电源</a>
									<a href="#">散热器 </a>
									<a href="#">刻录机/光驱 </a>
									<a href="#">声卡 </a>
									<a href="#">拓展卡 </a>
									<a href="#">DIY小附件 </a>
									<a href="#">服务器配件 </a>
									<a href="#">DIY小附件 </a>
								</div>
							</div>
							<div class="item">
								<div class="cat-name">装机配件 </div>
								<div class="cat-list">
									<a href="#"> CPU </a>
									<a href="#"> 硬盘 </a>
									<a href="#"> SSD固态硬盘 </a>
									<a href="#"> 内存 </a>
									<a href="#"> 显示 </a>
									<a href="#"> 器智能显示器 </a>
									<a href="#"> 主板 </a>
									<a href="#"> 显卡 </a>
									<a href="#"> 机箱 </a>
									<a href="#"> 电源</a>
									<a href="#"> 散热器 </a>
									<a href="#"> 刻录机/光驱 </a>
									<a href="#"> 声卡 </a>
									<a href="#"> 拓展卡 </a>
									<a href="#"> DIY小附件 </a>
									<a href="#"> 服务器配件 </a>
									<a href="#"> DIY小附件 </a>
								</div>
							</div>
							<div class="item">
								<div class="cat-name">装机配件 </div>
								<div class="cat-list">
									<a href="#"> CPU </a>
									<a href="#"> 硬盘 </a>
									<a href="#"> SSD固态硬盘 </a>
									<a href="#"> 内存 </a>
									<a href="#"> 显示 </a>
									<a href="#"> 器智能显示器 </a>
									<a href="#"> 主板 </a>
									<a href="#"> 显卡 </a>
									<a href="#"> 机箱 </a>
									<a href="#"> 电源</a>
									<a href="#"> 散热器 </a>
									<a href="#"> 刻录机/光驱 </a>
									<a href="#"> 声卡 </a>
									<a href="#"> 拓展卡 </a>
									<a href="#"> DIY小附件 </a>
									<a href="#"> 服务器配件 </a>
									<a href="#"> DIY小附件 </a>
								</div>
							</div>
							<div class="item">
								<button>电脑整机频道<img src="image/row-right.png"></button>
								<button>电脑外设频道<img src="image/row-right.png"></button>
							</div>
						</div>
					</li>
					<li>
						<p class="first">
							<a href="#">电脑</a>
							<a href="#">硬件外设</a>
							<a href="#">装机宝</a>
							<img src="image/row-right.png">
						</p>
						<p class="second">
							<a href="">荣耀</a>
							<a href="">单反</a>
							<a href="">只能设备</a>
						</p>
						<div class="sub-menu">电脑</div>
					</li>
					<li>
						<p class="first">
							<a href="#">大家电</a>
							<img src="image/row-right.png">
						</p>
						<p class="second">
							<a href="">空调</a>
							<a href="">冰箱</a>
							<a href="">洗衣机</a>
						</p>
						<div class="sub-menu">大家电</div>
					</li>
					<li>
						<p class="first">
							<a href="#">厨房电器</a>
							<a href="#">生活电器</a>
							</a>
							<img src="image/row-right.png">
						</p>
						<p class="second">
							<a href="">微波炉</a>
							<a href="">取暖设备</a>
							<a href="">智能设备</a>
						</p>
						<div class="sub-menu">厨房电器</div>
					</li>
					<li>
						<p class="first">
							<a href="#">食品</a>
							<a href="#">饮料</a>
							<a href="#">生鲜</a>
							<img src="image/row-right.png">
						</p>
						<p class="second">
							<a href="">进口零食</a>
							<a href="">方便面</a>
							<a href="">保健</a>
						</p>
						<div class="sub-menu">食品</div>
					</li>
				</ul>
			</div>
			<ul class="nav">
				<li>
					<a href="">数码城</a>
				</li>
				<li>
					<a href="">服装</a>
				</li>
				<li>
					<a href="">食品</a>
				</li>
				<li>
					<a href="">发现</a>
				</li>
				<li>
					<a href="">二手</a>
				</li>
				<li>
					<a href="">名品会</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript">
	var a = 0;
	$(".all-goods .title").click(function() {
		$(this).next("ul").slideToggle(500);
		$(".all-goods .title img").rotate({
			angle: a,
			animateTo: a + 180,
			duration: 500,
			callback: function() {
				a = a == 180 ? 0 : 180;
			}
		});
	});
</script>